<!DOCTYPE>
<!--解决idea thymeleaf 表达式模板报红波浪线-->
<!--suppress ALL -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>IMS实时日志</title>

    <!-- 引入公用部分 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

	<style>
		.online{color: green;}
		.offline{color: red;}
	</style>

</head>
<body>

<div style="display: flex;">

	<div style="flex: 3;">
		<!-- 标题 -->
		<h1 style="text-align: center;">IMS实时日志</h1>
	</div>
	
	<!-- 操作栏 -->
	<div style="flex: 1; text-align: right; margin:auto;">
		<div>
			<span id="ws-light" class="offline" style="font-size: 15px;">●</span><span style="font-weight: bold;">ws://</span><input id="ws-input" type="text" value="127.0.0.1:8080/websocket/logging" style="width: 225px; height: 25px;"/>
			<button id="ws-connect" style="color: green; height: 25px; ">连接</button>
		</div>
		<div style="margin-top: 10px;">
			<button id="auto-scroll" style="color: green; height: 25px; ">关闭自动滚动</button>
		    <button id="clear-screen" style="color: red; height: 25px; ">清屏</button>
	    </div>
	</div>

</div>

<!-- 显示区 -->
<div id="loggingText" contenteditable="true"
     style="width:100%;height: 90%;background-color: ghostwhite; overflow: auto;"></div>


</body>
<script th:inline="javascript">
	
	// 是否自动滚动
	let auto_scroll = true;
	
    //websocket对象
    let websocket = null;

    //判断当前浏览器是否支持WebSocket
    /**
    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://");
    } else {
        console.error("不支持WebSocket");
    }
    */
    
    // 连接
    function connect(){
		if ('WebSocket' in window) {
			var host = $('#ws-input').val();
			if(!host){
				alert("请输入服务器连接地址！");
				return;
			}
			var url = "ws://" + host;
        	websocket = new WebSocket(url);
        	
        	// 修改信号灯
        	$('#ws-light').removeClass('offline');
        	$('#ws-light').addClass('online');
        	
	    } else {
	        console.error("不支持WebSocket");
	    }
	    
        //连接发生错误的回调方法
	    websocket.onerror = function (e) {
	        console.error("WebSocket连接发生错误");
	        
	        // 修改信号灯
        	$('#ws-light').removeClass('online');
        	$('#ws-light').addClass('offline');
	    };
	
	    //连接成功建立的回调方法
	    websocket.onopen = function () {
	        console.log("WebSocket连接成功")
	    };
	
	    //接收到消息的回调方法
	    websocket.onmessage = function (event) {
	        //追加
	        if (event.data) {
	            //日志内容
	            let $loggingText = $("#loggingText");
	            $loggingText.append(event.data);
	
	            //是否开启自动底部
				if(auto_scroll || is_first){
					//滚动条自动到最底部
	            	$loggingText.scrollTop($loggingText[0].scrollHeight);
				}
	        }
	    }
	
	    //连接关闭的回调方法
	    websocket.onclose = function () {
	        console.log("WebSocket连接关闭")
	    }
	}
    
    
    // 连接
    $("#ws-connect").click(function(){
	  	console.log('WebSocket Connecting ...');
		connect();
	});


	// 清屏
	$("#clear-screen").click(function(){
	  	console.log('清屏...');
		$("#loggingText").html('');
	});
	
	// 开启/关闭自动滚动
	$("#auto-scroll").click(function(){
	  	console.log('自动滚动开关触发...');
		if(auto_scroll){
			auto_scroll = false;
			$('#auto-scroll').text("开启自动滚动");
		} else {
			auto_scroll = true;
			$('#auto-scroll').text("关闭自动滚动");
		}
	});

</script>
</html>